<template>
    <div style="position: relative;">
        <el-tabs v-model="activeName" @tab-click="handleChangeTab">
            <el-tab-pane label="本企业内容包" name="packageselflist">
                <package-self-list ref="packageSelfRef" />
            </el-tab-pane>
            <!--<el-tab-pane label="合作企业分享内容包" name="packagesharelist">
                <package-share-list ref="packageShareRef" />
            </el-tab-pane>-->
            <el-tab-pane label="合作企业可写入内容包" name="packagewritelist">
                <package-write-list ref="packageWriteRef" />
            </el-tab-pane>
            <el-tab-pane label="合作项目内容包" name="packageextlist">
                <package-exts-list ref="packageExtsRef" />
            </el-tab-pane>
        </el-tabs>
        <el-button v-if="activeName=='packageselflist'" @click="handleDialog('PackageSave')" size="mini" style="position: absolute; right: 0px; top:5px;" type="primary">创建内容包</el-button>
    </div>
    <component
        :is="asyncComponentPackageSave"
        :visible="packageSaveVisible"
        :toDialogData="toPackageSaveDialogData"
        @cancelDialog="cancelDialog"
        :key="toPackageSaveDialogData.dialogKey"
    />
</template>

<script>
    import { ref, nextTick, defineAsyncComponent } from 'vue'
    import {useRoute, useRouter} from 'vue-router'
    import PackageSelfList from './list/PackageSelfList'
    import PackageShareList from './list/PackageShareList'
    import PackageWriteList from './list/PackageWriteList'
    import PackageExtsList from './list/PackageExtsList'
    
    export default {
        name: "",
        components: {
            PackageSelfList,
            PackageShareList,
            PackageWriteList,
            PackageExtsList,
            "PackageSave" : defineAsyncComponent(() => import('./components/dialogs/PackageCreate')),
        },
        setup() {
            const packageSelfRef = ref('')
            const packageShareRef = ref('')
            const packageWriteRef = ref('')
            const packageExtsRef = ref('')
            const route = useRoute()
            const router = useRouter()
            const activeName = ref('')
            route.query.activename ? activeName.value = route.query.activename : activeName.value = 'packageselflist'
            if(route.query.activename == undefined ){
                router.push({name:route.name,query:{'activename':activeName.value}})
            }else{
                switch( activeName.value ){
                    case 'packageselflist':
                        nextTick(() => {
                            packageSelfRef.value.init()
                        })
                        break
                    case 'packagesharelist':
                        nextTick(() => {
                            packageShareRef.value.init()
                        })
                        break
                    case 'packagewritelist':
                        nextTick(() => {
                            packageWriteRef.value.init()
                        })
                        break
                    case 'packageextlist':
                        nextTick(() => {
                            packageExtsRef.value.init()
                        })
                        break
                }
            }
            const handleChangeTab = (tab) => {
                router.push({name:route.name,query:{'activename':tab.props.name}})
            }



            //内容包添加编辑数据
            const toPackageSaveDialogData = ref({
                'action': 'add',
                'dialogKey': ''
            })

            // 弹窗相关
            const asyncComponentPackageSave = ref(null)
            const packageSaveVisible = ref(false)
            const handleDialog = ( dialogName ) => {
                toPackageSaveDialogData.value.dialogKey = new Date().getTime()
                console.log(dialogName)
                switch ( dialogName ){
                    case 'PackageSave':
                        asyncComponentPackageSave.value = 'PackageSave'
                        toPackageSaveDialogData.value.action = 'add'
                        packageSaveVisible.value = true
                        break;
                }
            }
            const cancelDialog = ( dialogName, optiontype ) => {
                /*
                    optiontype:
                    1:刷新列表
                */
                switch ( dialogName ){
                    case 'PackageSave':
                        packageSaveVisible.value = false
                        if( optiontype == 1 ){
                            packageSelfRef.value.init()
                        }
                        break;
                }
            }
            return {
                packageSelfRef,
                packageShareRef,
                packageWriteRef,
                packageExtsRef,
                activeName,
                handleChangeTab,
                toPackageSaveDialogData,
                packageSaveVisible,
                handleDialog,
                cancelDialog,
                asyncComponentPackageSave,
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>